<template>
    <!-- 理财、借贷、直播 -->
    <section class="homeTab">
        <div class="homeTab-mark">
            <van-tabs v-model="active"  class="homeTab-wrap" animated>
                <van-tab v-for="item in tabList" :key="item.id" :title="item.title">
                    <component :is='item.component' v-if="item.id === active"></component>
                </van-tab>
            </van-tabs>
        </div>
    </section>
</template>

<script>
import { Tab, Tabs } from 'vant';
import financial from './components/financial.vue';
import borrowing from './components/borrowing.vue';
import streaming from './components/streaming.vue';
export default {
    data() {
        return {
            active: 0,
            tabList:[
                {
                    id:0,
                    title:'理财',
                    component:financial,
                },
                {
                    id:1,
                    title:'借贷',
                    component:borrowing,
                },
                {
                    id:2,
                    title:'直播',
                    component:streaming,
                },
            ]
        }
    },
    components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    financial,
    borrowing,
    streaming,
  },
}
</script>

<style lang="scss" scoped>
.homeTab {
    padding: 64px 32px;
    background-color: #09090b;
    margin-left: -32px;
    margin-right: -32px;
    .homeTab-mark{
        position: relative;
        left: 0;
        top: 0;
        z-index: 1;
        height: fit-content;
        &::before{
            z-index: 0;
            content: "";
            position: absolute;
            width: 40%;
            height: 20%;
            filter: blur(140px);
            left: 40%;
            top: 40%;
            transform: translateZ(0);
            background: linear-gradient(90deg, #00fcbd, #cc157e);
        }
    }
    ::v-deep .homeTab-wrap{
        .van-tabs__wrap{
            height: 100% !important;
            margin-bottom: 42px !important;
        }
        .van-tabs__nav{
            margin: 0 auto;
            width: fit-content;
            padding: 10px;
            border: 1px solid #151818;
            border-color: #1c2020;
            background-color: transparent;
            border-radius: 48px;
            .van-tab{
                padding: 16px 42px;
                font-size: 34px;
                color: #8c8c8c;
                border: none;
                border-radius: 38px;
                width: fit-content;
            }
            .van-tab--active{
                color: #000 !important;
                background-color: #fff;
            }
            .van-tabs__line{
                display: none;
            }
        }
    }
}
</style>